<template>
	<view class="base-content">
		<view class="nav-kong"></view>
		<view class="nav">
			<view class="nav_box">
				<image src="@/static/img/base/back.png" alt="" class="back" @tap="backHandle"></image>
				<text>基地预约</text>
				<image src="@/static/img/base/search.png" alt="" class="search"></image>
			</view>
		</view>
		
		<view class="screening">
			<u-dropdown  title-size="24rpx" menu-icon-size="24rpx" :dropDownShow="dropDownShow" @open="openDropdown" @close="closeDropdown" duration="300">
				<u-dropdown-item @change='setType' v-model="params.type" :title="typeStr" :options="typeData"></u-dropdown-item>
				<u-dropdown-item @change='setTimeVal' v-model="params.datetime"  :title="week"  :options="timeArr"></u-dropdown-item>
				<u-dropdown-item @change="setDesc" v-model="sortType" :title="sortStr" :options="descData"></u-dropdown-item>
			</u-dropdown>
		</view>
		<view class="site-content">
			<view class="site-list-row" v-for="(item,index) in siteList" :key="index">
				<view class="site-img" :style="`background-image:url(${item.trainingBaseCover})`">
					<view class="grade">{{Number(item.grade).toFixed(1)}}</view>
				</view>
				<view class="site-location">
					<text class="location-text">{{item.name}}</text>
					<view class="positioning">
						<text>{{item.trainingTypeStr}}</text>
						<text></text>
						<text></text>
					</view>
					<view class="detail-btn-row">
						<view class="residue">
							<image src="@/static/img/base/movie2.png" alt=""></image>
							<text>余:{{item.remain}}</text>
						</view>
						<view class="price">
							<text>¥ {{Number(item.unitPrice).toFixed(1)}}/小时</text>
						</view>
							<view @click="detailHandle(item)" class="my-btn">
								预约
							</view>
							<!-- <u-button @click="detailHandle(item)" type="default" shape="circle" class="detail-btn" hover-class="none"></u-button> -->
					</view>
				</view>
			</view>
			<u-loadmore :status="status" />
		</view>
	</view>
</template>

<script>
	import { API } from '../../config/myApi.js';
	export default {
		data() {
			return {
				siteList: [],
				screenShow:false,
				dropDownShow: false,
				params:{
					type: '',
					datetime:"",
					sortField:"create_time",
					sortType:"desc",
					page: 1,
					rows: 10,
				},
				typeData:[],
				typeVal:"",
				timeArr: [],
				timeVal:"",
				sortType:"create_time",
				descData: [
					{
						label: '综合排序',
						value: "create_time",
					},
					{
						label: '好评优先',
						value: "grade",
					},
					{
						label: '余量（从高到低）',
						value: "remain|desc",
					},
					{
						label: '余量（从高到低）',
						value: "remain|asc",
					},
					{
						label: '收费（从高到低）',
						value: "unitPrice|desc",
					},
					{
						label: '收费（从高到低）',
						value: "unitPrice|asc",
					}
				],
				timer:[],
				newTime:[],
				listTotal:0,
        status: 'loadmore',
			}
		},
		onLoad(){
			this.getBase();
			this.getType();
			this.getTimer()
		},
		onReachBottom(){
			this.params.page++
			const listLastPage = Math.ceil(this.listTotal / this.params.rows)
			if(this.params.page <= listLastPage){
				this.getBase()
			}
		},
		computed:{
			sortStr(){
				return this.descData.find(item=>item.value === this.sortType).label
			},
			typeStr(){
				if(this.typeVal){
					return this.typeData.find(item => item.value === this.typeVal).label
				}
				return "基地类型"
			},
			week(){
				switch (new Date(this.timeVal).getDay()){
					case 1:
						return "周一丨" + this.timeVal.substring(5)
						break;
					case 2:
						return "周二丨" + this.timeVal.substring(5)
						break;
					case 3:
						return "周三丨" + this.timeVal.substring(5)
						break;
					case 4:
						return "周四丨" + this.timeVal.substring(5)
						break;
					case 5:
						return "周五丨" + this.timeVal.substring(5)
						break;
					case 6:
						return "周六丨" + this.timeVal.substring(5)
						break;
					default:
						break;
				}
				return "周日丨" + this.timeVal.substring(5)
			}
		},
		methods: {
			// 获取时间
			getTimer(){
				if (this.timeArr.length) {
					this.timeArr = []
				}
				const timer = new Date()
				const timestamp = timer.getTime()
				const oneDaySecond = 1000 * 60 * 60 *24
				// this.timeVal = new Date(timestamp).toLocaleString().substring(0,10).replaceAll("/","-")
				this.timeVal = new Date(timestamp).getFullYear() + "-" + (new Date(timestamp).getMonth()+1) + '-' + new Date(timestamp).getDate()
				//获取为未来一周的天数
				for(let i = 0 ; i<7 ;i++){
					// let val = new Date(parseInt(timestamp) + (oneDaySecond * i)).toLocaleString().substring(0,10).replaceAll("/","-")
					let val = new Date(parseInt(timestamp) + (oneDaySecond * i))
					this.timeArr = [
						...this.timeArr,
						{
							label:val.getFullYear() + "-" + (val.getMonth()+1) + '-' + val.getDate(),
							value:val.getFullYear() + "-" + (val.getMonth()+1) + '-' + val.getDate()
						}
					]
				}
			},
			//获取基地列表
			getBase(val = 0){
				if(val){
					this.params.page = 1
					this.siteList = []
					
				}
				let query = Object.assign({}, this.params);
				if (query.datetime) {
					query.searchTimeBegin = query.datetime;
					query.searchTimeEnd = query.datetime;
				} else {
					query.searchTimeBegin = "";
					query.searchTimeEnd = "";
				}
				delete query.datetime;
				this.status = 'loading';
				API.getSite(query).then(res=> {
					if (res.code == 200) {
						this.siteList = [
							...this.siteList,
							...res.result.records
						]
						
						this.listTotal = res.result.total
					}
					console.log( "site",this.siteList);
				}).finally(()=>{
					this.status = 'nomore'
				})
			},
			setTimeVal(val){
				this.timeVal = val
				this.getBase(1)
			},
			setType(val){
				if(this.typeVal != val){
					this.typeVal = val
					console.log(val);
				}else{
					this.typeVal = ""
					this.params.type = ""
				}
				this.getBase(1);
			},
			setDesc(val){
				if(val.indexOf("|")){
					const descArr = val.split("|")
					this.params = {
						...this.params,
						sortField:descArr[0],
						sortType:descArr[1]
					}
				}else{
					this.params = {
						...this.params,
						sortField:val,
						sortType:"desc"
					}
				}
				this.getBase(1)
			},
			getType(){
				API.gettype().then(res=> {
					console.log("gettype",res);
					if(res.code === 200){
						this.typeData= res.result.map(item=>(
							{
								label:item.name,
								value:item.id
							}
						))
					}
				})
				console.log("typeData",this.typeData);
			},
			backHandle() {
				uni.navigateBack()
			},
			detailHandle(item){
				uni.navigateTo({
					url:`/pages/base/detail?id=${item.id}`
				})
			},
			openDropdown(index){
				this.dropDownShow = true
				switch (index){
					case 0:
						this.getType()
						break;
					case 1:
						this.getTimer()
						break;
					default:
						break;
				}
			},
			closeDropdown(){
				this.dropDownShow = false
				// document.querySelector('.site-content').style.zIndex = "1000";
			}
		}
	}
</script>

<style lang="scss" scoped>
	.base-content {
		background: #F5F5F5;
		overflow: hidden;
			
		.scarch{
			width: 100vh;
			height: 30rpx;
			border:  1px solid red;
		}
		.nav-kong {
			background-color: #fff;
			width: 100vw;
			height: 284rpx;
		}

		.nav {
			height: 182rpx;
			width: 100vw;
			background: #fff;
			position: fixed;
			display: flex;
			justify-content: center;
			align-items: center;
			top: 0;
			left: 0;
			z-index: 2;
			.nav_box{
				position: relative;
				width: 100%;
				text-align: center;
				bottom: -52rpx;
			}
			.back {
				width: 19rpx;
				height: 34rpx;
				position: absolute;
				top: 50%;
				left: 35rpx;
				transform: translateY(-50%);
			}

			>text {
				font-size: 36rpx;
				color: #333333;
				font-weight: bold;
			}

			.search {
				width: 37rpx;
				height: 36rpx;
				position: absolute;
				top: 50%;
				right: 30rpx;
				transform: translateY(-50%);
			}
		}

		.screening {
			width: 100vw;
			height: 100rpx;
			background: #fff;
			position: fixed;
			top: 183rpx;
			left: 0rpx;
			z-index: 1;
			// overflow: hidden;
			::v-deep.u-dropdown {
				padding: 0rpx 30rpx;
				margin-top: 22rpx;
				display: flex;
			}
			::v-deep.u-dropdown__menu__item {
				// width: 210rpx;
				height: 58rpx;
				padding: 0 20rpx;
				background: #F6F6F6;
				border-radius: 12rpx;
				box-sizing: border-box;
				flex: none;
			}
			
			::v-deep.u-dropdown__menu {
				width: 100%;
				display: flex;
				justify-content: space-between;
				z-index: 10;
			}
		}

		.site-content {
			padding: 0rpx 30rpx;
			position: relative;
			// z-index: 1000;
			.site-list-row {
				padding: 19rpx 32rpx 23rpx 20rpx;
				background: #fff;
				border-radius: 14rpx;
				margin-top: 26rpx;
				display: flex;

				.site-img {
					width: 240rpx;
					height: 190rpx;
					// border: 1rpx solid red;
					overflow: hidden;
					border-radius: 6rpx;
					position: relative;
					background-size:100% ;
					.grade {
						width: 83rpx;
						height: 30rpx;
						position: absolute;
						top: 0;
						left: 0;
						font-size: 20rpx;
						color: #fff;
						background-color: rgba(0, 0, 0, .3);
						text-align: center;
						border-bottom-right-radius: 20rpx;
					}
				}

				.site-location {
					margin-left: 21rpx;
					flex: 1;
					display: flex;
					flex-direction: column;

					.location-text {
						font-size: 28rpx;
						font-weight: bold;
						color: #333333;
						line-height: 36rpx;
					}

					.positioning {
						margin-top: 18rpx;

						>text:first-of-type {
							font-size: 24rpx;
							color: #8a8a8a;
							margin-left: 10rpx;
						}

						>text:last-of-type {
							font-size: 24rpx;
							color: #333333;
							margin-left: 10rpx;
							border-bottom: 1rpx solid #333333;
						}
					}

					.detail-btn-row {
						width: 100%;
						margin-top: 20rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						
						// overflow: hidden;
						.residue {
							display: flex;
							align-items: center;

							>image {
								width: 22rpx;
								height: 20rpx;
							}

							>text {
								font-size: 24rpx;
								color: #F4333C;
								margin-left: 6rpx;
							}
						}

						.price {
							font-size: 24rpx;
							font-weight: bold;
							color: #F4333C;
							margin-left: 10rpx;
						}

						.detail-btn {
							margin-left: 10rpx;
							background-color: #F4333C;
							color: #fff;
							height: 52rpx;
							width: 122rpx;
							font-size: 26rpx;
							// z-index: -1;
							overflow: hidden;
						}

						.u-hairline-border:after {
							border: none;
						}
						.my-btn {
							background-color: #F4333C;
							color: #fff;
							height: 52rpx;
							width: 122rpx;
							font-size: 26rpx;
							border-radius: 10rpx;
							text-align: center;
							line-height: 52rpx;
						}
						
					}
				}
			}

			.site-list-row:first-of-type {
				margin-top: 21rpx;
			}
		}
	}
</style>
